<template>
  <div id="bottomLeft" >
    <img src="../../assets/m3/machine_3.png" width="98.5%" height="95%" style="position: absolute;top: 20px"/>
    <status-ball :top="item.lightLocationTop"
                 :left="item.lightLocationLeft"
                 :status="item.status==0?'g':(item.status==1?'y':(item.status=='2'?'r':'gr'))"
                 :hint="item.pline+'-'+item.equipmentName+'['+item.equipmentNos+']'"
                 :equipment="item.equipmentNos"
                 v-for="item in store.machineMap"
                 @click="$emit('click',item)"
                 :key="item.id"/>
    <!--
    <span
          v-bind:style="{position: 'absolute',color: '#a71d5d','font-size': '6px',left: item.lineMachine.lightLocationLeft+'px',top:item.lineMachine.lightLocationTop+'px'}"
          v-for="item in store.machineMap"
          :key="item.lineMachine.equipmentName+item.lineMachine.lightLocationLeft"
          v-html="item.lineMachine.equipmentName"
    ></span>
    -->
  </div>
</template>

<script>
//import BottomLeftChart from '@/components/echart/bottom/bottomLeftChart'
import statusBall from "./statusBall";
import store from "@/views/m3/store";
export default {
  components: {
    statusBall
  },
  name: "ProdLineWhole",
  data(){
    return {
      store
    }
  }
}
</script>

<style lang="scss" scoped>
$box-height:auto;// 100%;
$box-width: 100%;
.smtLine{
  height: 80px;
  background-image: url("../../assets/m1/smt-line.png");
  background-size:100% 100%;
}

.dv-dec-3 {
  position: absolute;
  width: 55px;
  height: 20px;
  top: 1px;
  left: 10px;
}
.dv-dec-1 {
  position: relative;
  width: 55px;
  height: 20px;
  top: -3px;
}
#bottomLeft {
  padding: 15px 16px 10px 18px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    //height: $box-height - 35px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .chart-box {
    margin-top: 16px;
    width: 170px;
    height: 170px;
    .active-ring-name {
      padding-top: 10px;
    }
  }

}
</style>
